<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/vue.js"></script>
    <style>
        .red {
            background: red;
        }

        #app div {
            display: none;
        }

    </style>

</head>
<body>

<div id="app">
    <input v-for="item,i in tabData"
           type="button"
           :value=item.title
           :class="{red: i === index}"
           @click="tableHandle(i)"
    >

    <div v-for="item,i in tabData"
         :style="{display:i===index?'block':'none'}"
    >
        <p v-for="option in item.list">{{option.subTitle}}</p>

    </div>



</div>


<script>
    /**
     * 控制class
     *  class ='{className:表达式}'
     *  表达式 为true 就添加class,为false 就忽略
     *
     * 控制style
     *  v-bind:style = "{样式名:样式值}"
     *
     * vue 中的事件
     *  语法 v-on: 事件名= '事件处理函数'
     *
     *  需要传参
     *  语法: v-on:事件名= '事件处理函数(参数)'
     */

    let tabData = [
        {
            title: '新闻',
            list: [
                {
                    subTitle: '新闻简介1'
                },{
                    subTitle: '新闻简介2'
                },{
                    subTitle: '新闻简介3'
                }
            ]
        },{
            title: '娱乐',
            list: [
                {
                    subTitle: '娱乐简介1'
                },{
                    subTitle: '娱乐简介2'
                }, {
                    subTitle: '娱乐简介3'
                }

            ]
        },{
            title: '体育',
            list: [
                {
                    subTitle: '体育新闻1'
                },{
                    subTitle: '体育新闻2'
                },{
                    subTitle: '体育新闻3'
                }
            ]
        }

    ]
    new Vue({

        el: '#app',
        data: {
            tabData,
            index:0 // 控制让哪一个面板显示
        },
        methods: {
            tableHandle(i){
                this.index =i;
            }

        }
    })

</script>


</body>
</html>